<template>
    <el-container style="padding: 0 200px;">

        <FrontAside />
        <el-main style="background-color: white;margin-left: 30px;box-shadow: 0 1px 5px rgb(0 0 0 / 10%);">
            <transition name="fade-right" mode="out-in">
                <router-view></router-view>
            </transition>
        </el-main>

    </el-container>
</template>

<script>
import FrontAside from '@/components/FrontAside.vue'
export default {
    name: "My",
    components: {
        FrontAside
    }
}
</script>

<style lang="less" scoped>
// 进入后和离开前保持原位
.fade-right-enter-to,
.fade-right-leave-from {
    opacity: 1;
    transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.fade-right-enter-active,
.fade-right-leave-active {
    transition: all 0.6s;
}

// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to {
    opacity: 0;
    transform: translateX(50%);
}

.myhead {
    height: 30px;
}
</style>